<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo">
                <el-form-item label="集群名称">
                    <el-input
                            v-model="searchInfo.cluster_name"
                            placeholder="请输入集群名称"
                            clearable
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="管理IP">
                    <el-input
                            v-model="searchInfo.vip"
                            placeholder="请输入管理IP"
                            clearable
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="数据库类型">
                    <el-input
                            v-model="searchInfo.database_type"
                            placeholder="请输入数据库类型"
                            clearable
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                            class="filter-item"
                            type="primary"
                            icon="el-icon-search"
                            @click="handleQuery"
                    >搜索</el-button>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item>
                    <el-button
                            class="filter-item"
                            type="primary"
                            icon="el-icon-plus"
                            @click="handleClickAddOrEdit(null, 'create')"
                    >新增数据</el-button>
                    <el-button
                            class="filter-item"
                            type="primary"
                            icon="el-icon-download"
                            @click="handleClickExport(null, 'create')"
                    >数据导出</el-button>
                </el-form-item>


            </el-form>
        </div>

        <el-table
                :data="tableData"
                row-key="ID"
                border
                style="width: 100%">
            <el-table-column label="ID" width="50" prop="ID">
                <template slot-scope="scope">{{scope.row.ID}}</template>
            </el-table-column>
            <el-table-column prop="database_type" label="数据库类型"/>
            <el-table-column prop="vip" label="管理地址"/>
            <el-table-column prop="port" label="端口"/>
            <el-table-column prop="env_name" label="环境名称">
                <template slot-scope="scope">{{scope.row.env_name | basecode(scope.row.env_name,'env_name')}}</template>
            </el-table-column>
            <el-table-column  label="项目名称">
                <template slot-scope="scope">{{scope.row.project.project_fullname}}</template>
            </el-table-column>
            <el-table-column prop="idc_location" label="IDC位置">
                <template slot-scope="scope">{{scope.row.idc_location | basecode(scope.row.idc_location,'server_idc')}}</template>
            </el-table-column>
            <el-table-column  label="在用库数">
                <template slot-scope="scope">
                    <router-link :to="{name: 'databaseUsers', params:{id:scope.row.cluster_name}}" class="link-type">
                        <span>{{ scope.row.databaseUser.length }}</span>
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column label="创建日期" align="center" prop="createdAt" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.CreatedAt| formatDate}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
                <template slot-scope="scope">
                    <el-button
                            @click="handleClickAddOrEdit(scope.row.ID, 'find')"
                            size="small"
                            type="primary"
                            icon="el-icon-info"
                    >详情</el-button>
                    <el-button
                            @click="handleClickAddOrEdit(scope.row.ID, 'edit')"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"
                    >编辑</el-button>
                    <el-button @click="deleteDatabase(scope.row)" type="danger" icon="el-icon-delete" style="margin-left: 6px;" size="mini" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
    </div>
</template>

<script>
    import {
        getDatabaseList,
        deleteDatabase,
        exportExcel
    } from "@/api/cmdb_database";
    import infoList from '@/mixins/infoList'

    export default {
        name: "database",
        mixins: [infoList],
        data() {
            return {
                listApi: getDatabaseList,
                searchInfo: {
                    cluster_name: undefined,
                    vip: undefined,
                    database_type: undefined,
                },

            }
        },
        methods: {
            // 项目搜索
            handleQuery() {
                this.page =1
                this.pageSize=10
                this.getTableData()
            },
            // 进入详情、新增、编辑页面
            handleClickAddOrEdit(id, type="") {
                this.$router.push({ name: 'databaseDetail', query: { id: id, type: type }})
            },
            // 删除项目
            deleteDatabase(row) {
                this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(async () => {
                        this.visible = false;
                        const res = await deleteDatabase({ ID: row.ID });
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            await  this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            handleClickExport() {
                let params = this.searchInfo       // 按条件检索后 去导出excel
                params.fileName = '数据库列表.xlsx'   // excel下载的文件名
                exportExcel(params)
            }
        },
        filters: {
            formatBoolean: function(s) {
                if (s == "1" ) {
                    return true
                } else {
                    return false;
                }
            }
        },
        async created() {
            await this.getTableData();
        }
    }
</script>

<style scoped lang="scss">
    .link-type, .link-type:focus {
        color: #337ab7;
        cursor: pointer;
    }
</style>

